<template>
  <div id="box">
    <h2><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2106576569,1964628658&fm=15&gp=0.jpg" alt=""></h2>

      <van-cell-group>
        <van-field
        v-model="username"
          value="输入用户名"
          placeholder="输入用户名"
          left-icon="contact"
          @input="val"
        />
        <van-field
          v-model="password"
          type="password"
          left-icon="closed-eye"
          placeholder="输入登录密码"
          @input="vall"

        />
    </van-cell-group>
    <div class="zu">
      <van-icon name="question-o" />
    <span>忘记密码?</span>
    <span v-tap='{methods:reg}' >注册<van-icon name="arrow" /></span>
    </div>
     <van-button type="default" v-tap='{methods:login}'>登录</van-button>
    <van-checkbox  v-model="checked" checked-color="#f9e00e">同意<span v-tap="{methods:fu}" class="fu">服务协议</span></van-checkbox>
  </div>


</template>

<script>
  import * as api from '../api/getProlist'
  export default {
    name:'Login',
    data(){
      return{
        username:'',
        password:'',
        rusername:'',
        rpassword:'',
        checked:true
      }
    },
    methods:{
      reg(){
        this.$router.push('/Reg')
      },
      login(){
		  if(this.rusername==''&&this.rpassword==''){
			  
		  }else{
			  this.$router.push('/Shouye')
		  }
      },
      val(){
        this.rusername=this.username
      },
      vall(){
        this.rpassword=this.password
      },
      fu(){
        this.$router.push('/sla')
      },
    },
    updated(){
      api.getLogin({username:this.rusername}).then((data)=>{
        localStorage.setItem('uid',data.data.data.id)
        localStorage.setItem('username',data.data.data.username)
        localStorage.setItem('name',data.data.data.username)
        localStorage.setItem('token',data.data.data.token)
        // console.log(data.data.data)
      })
    },
    }
</script>

<style scoped="">
  #box{
    padding:10px 24px;
    text-align: center;
  }
  img{
    width: 80px;
    height: 80px;
  }
  .van-field{
      border-bottom: 1px solid #ccc;
      font-size: 18px;
   }
   .zu span:nth-of-type(1){
     margin-left: -200px;
   }
   .zu{
     height: 40px;
     font-size: 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #777;
   }
   button{
     margin-top: 140px;
     width: 300px;
     background: #ddd;
     font-size: 20px;
     line-height: 40px;
     color: #888;
   }
   .fu{
     text-decoration: underline;
   }
   .van-checkbox{
     width: 100px;
     margin: 20px auto;
   }
</style>
